<template>
  <div class="container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="商品主图">
        <el-upload
          action="/dev-api/user/avatar/upload"
          list-type="picture-card"
          name="avatar">
          <div slot="default">
            <div>
              <i  class="el-icon-plus"></i>
            </div>
          </div>
          <div slot="file" slot-scope="{file}">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url" alt=""
            >
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
               >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="商品类型">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品介绍">
        <el-input type="textarea"/>
      </el-form-item>
      <el-form-item label="价格">
        <el-input style="width: 100px"></el-input>
      </el-form-item>
      <el-form-item label="库存">
        <el-input style="width: 100px"></el-input>
      </el-form-item>
      <el-form-item label="标签">
        <el-tag
          v-for="(tag,indexj) in tags"
          :key="indexj"
          type="success"
          style="margin-right: 4px"
        >
          {{ tag }}
        </el-tag>
        <el-popover
          placement="right"
          title="标签列表"
          width="200"
          trigger="click"
        >
          <el-select
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="(t,indexk) in tags"
              :key="indexk"
              :label="t"
              :value="t"
            />
          </el-select>
          <el-button
            slot="reference"
            icon="el-icon-plus"
            type="text"
          />
        </el-popover>
      </el-form-item>
      <el-form-item label="商品描述" prop="content" style="margin-bottom: 30px;">
        <Tinymce ref="editor"  :height="400" />
      </el-form-item>
      <el-form-item label="上架时间">
        <el-col :span="10">
          <el-radio-group v-model="fun">
            <el-radio label="1">立刻上架</el-radio>
            <el-radio label="2">定时上架</el-radio>
            <el-radio label="3">放入仓库</el-radio>
          </el-radio-group>
          <transition name="slide-fade">
            <el-row  v-show="fun==2" >
              <el-col :span="2">
                设定至
              </el-col>
              <el-col :span="10">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-row>
          </transition>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交商品信息</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
  export default {
    name: "Publish",
    components: { Tinymce},
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        tags:["a","b","c"],
        fun:'1',
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      }
    }
  }
</script>

<style scoped lang="scss">
  .container{
    padding: 20px;
  }
  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .8s ease;
  }

  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
